<style type="text/css">

#register_load_balancer_dialog #instances_field {
  border: 1px solid gray;
  padding: 10px;
  margin-left: 15px;
  width: 490px;
}

#register_load_balancer_dialog #instances_field legend {
  padding: 0 3px 0 3px;
}

#register_load_balancer_dialog #instances_field table tr th {
  text-align: center;
}

#register_load_balancer_dialog table tr td {
  padding: 5px 10px;
}

#register_load_balancer_dialog #manipulation {
  vertical-align: middle;
}

</style>

<div id="register_load_balancer_dialog">
<table>
 <tr>
   <td><%= t("dialog.register_load_balancer.load_balancer_id") %>:</td>
   <td><%= @load_balancer_id %></td>
 </tr>
 <tr>
   <td><%= t("dialog.register_load_balancer.display_name") %>:</td>
   <td><%= @display_name %></td>
 </tr>
</table>
<br/>
 <fieldset id="instances_field">
  <legend><%= t("dialog.register_load_balancer.header") %></legend><legend>
  </legend><table cellspacing="5" cellpadding="5">
  <tbody>
    <tr>
      <th><span id="instances"><%= t("dialog.register_load_balancer.instances") %></span></th>
      <th></th>
      <th><span id="register_instances"><%= t("dialog.register_load_balancer.register_instances") %></span></th>
    </tr>
    <tr>
      <td>
      <select id="left_select_list" size="5" multiple="multiple" name="left_select_list"></select>
      </td>
      <td id="manipulation">
        <button id="right_button">&gt;</button>
        <br> <br>
        <button id="left_button">&lt;</button>
       </td>
       <td>
         <select id="right_select_list" size="5" multiple="multiple" name="right_select_list">
         </select>
       </td>
    </tr>
    </tbody>
 </table>
 </fieldset>
</div>
